<template>
  <div class='box-wrap-addgg'>
    <!-- 添加公告 --> 
    <div class="box-wrap-addgg-chil">
      <div class="addbox">
        <div class="addbox-chil"  @click='editInfo(1,{})'>
          <img src="../../assets/images/peach-svg/addadd.svg">
        </div>
      </div>
      <!-- 公告盒子 -->
      <!-- <div v-for="res in list" :key= res.id> -->
        <div class="addgg_box" v-for="(item, index) in list" :key="index">
          <div class="addgg_box_chil">
            <div class="chil-top">
              <div class="chil-top-left">
                <span class="font-top">{{item.title}}</span>
                <span class="font-bottom">{{utils.dateFormat(item.create_at,"yyyy-MM-dd HH:mm:ss")}}</span>
              </div>
              <div class="chil-top-right">
                <img v-if="idlistObj[item.role_id]=='测试角色'" src="../../assets/images/peach-svg/daili.svg">
                <img v-if="idlistObj[item.role_id]=='2测试角色'" src="../../assets/images/peach-svg/qudaozhu.svg">
                <span>{{idlistObj[item.role_id]}}</span>
              </div>
            </div>
            <div class="chil-center">
              <div class="chil-center-left">
                <span>
                  {{item.content}}                  
                </span>
              </div>
              <div class="chil-center-right">
                  <iSwitch v-model="item.status"  :true-value="1" :false-value="2" @on-change="change(index)"  />
              </div>              
            </div>
            <div class="chil-bottom">
              <div class="chil-bottom-left" @click='editInfo(2,item)'>
                <div>
                  <img src="../../assets/images/peach-svg/bianji.svg">
                  <span >修改</span>
                </div>
              </div>
              <div class="chil-bottom-right" @click="sureDel(item,-1)">
                <div>
                  <img src="../../assets/images/peach-svg/Icon (1).svg">
                  <span >删除</span>
                </div>
              </div>              
            </div>
          </div>
        </div>  
      <!-- </div> -->
    
    </div>
    <!-- <section class='box-operation'>
      <div class="box-search">         
        <div class='form-group-enquire'><Input v-model.trim="searchData.title" placeholder="公告标题" clearable @on-enter="onSearchGetList()"></Input></div>                  
        <div class='form-group-img' @click='onSearchGetList()'><img src="../../assets/images/peach-svg/Frame 23.svg"></div>
        <div class='form-group-addimg' @click='editInfo(1,{})'><img src="../../assets/images/peach-svg/add.svg"></div>
      </div>
    </section> -->
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import utils from "../../commons/utils";
import {commonMixin} from "../../components/ViewInitMixin" //每一个文件都要包含这个
import {TimePicker} from "iview"
import SearchUser from "../searchUser"
import Request from "../../commons/Request"

export default {
  name: "addUserDetailView",  //!!这块一定要注意，每一个文件都根据资源path来命名
  components:{TimePicker,SearchUser},
  mixins:[commonMixin],
  data() {
    const validateunit_p = (rule, value, callback) =>{
      if(value == "" || value == undefined){
        callback(new Error("用户角色不能为空"));
      }else {
        callback();
      }
    };
    return {
      modal:false,
      searchDate:"",
      searchTime:[utils.dateFormat(0,"HH")+"00",utils.dateFormat(0,"HH")+"00"],
      searchData:{
        title:"",
        page_index:1,
        page_size:30,
        // id:"",
      },
      truev:1,
      falsev:2,
      value:"1",
      utils:utils,  
      mnoList:{},
      provinceList:{},
      list:[],
      totalCnt:0,
      info:{},
      formPopIndex:0,
      leaders:[],
      roleObj:{},
      CountryList:[],
      idlistObj:{},
      tableColumns:[
        {
          title: "序号",
          field: "id",
          align: 'center',
        },
        {
          title: "标题",
          field: "title",
          align: 'center',
        },
        {
          title: "内容",
          field: "content",
          align: 'center',
          slots:{
            default:({row},h)=>{
              let conten=row.content
              if((conten!=''||conten!=undefined)&& String(conten).length>15){
                conten= conten.substring(0,20)+'...'
              }
              return [h("el-tooltip",
              {
                props: { placement: "right"},
              },
              [h("span",
                  {
                    style: {
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      width: "56px",
                    },
                  },conten
                ),
                h("div",
                    {
                      slot: "content",
                      style: {
                        padding: "10px",
                        width:"200px",
                        maxWidth: "200px",
                        minWidth:"2px"
                      },                  
                    },
                    [h("span",{
                        style:{
                            size: "15px",
                          }
                        },row.content
                    )]
                ),
              ]
              )]
            }
          }          
        },        
        {
          title: "用户角色",
          field: "role.name",
          align: 'center',
        },
        {
          title: "状态",
          field: "status",
          align: 'center',
          slots: {
                default: ({row},h) => {
                    let disabled = false;
                    if(this.Perm.add){
                        disabled = false;
                    }
                    return [h("iSwitch",
                            {
                                props: {
                                value:(1 & row.status)==1?true:false,
                                disabled:disabled,
                                size:"large",
                                },
                                on: {
                                'on-change': (value) => {
                                    let info = {"id":row.id};
                                    value==true?this.handleType = 3:this.handleType = 4;
                                    this.updateInfo(info);
                                }
                                }
                            },
                            [
                                h('span', {
                                slot: 'open',
                                domProps: {
                                    innerHTML: '启用'
                                }
                                }),
                                h('span', {
                                slot: 'close',
                                domProps: {
                                    innerHTML: '禁用'
                                }
                                })
                            ]
                    )];
                }
            }
        },
         {
          title: "创建时间",
          field: "create_at",
          align: 'center',
          slots:{
            default:({row},h) =>{
              if(row.create_at==0){
                return [h("div",'-')]
              }else
              return [h("div",utils.dateFormat(row.create_at,"yyyy-MM-dd HH:mm:ss"))]
            }
          }
        },
        {
          title: "操作",
          field: "action",        
          width: 150,
          align: "center",
          slots:{
            default: ({row},h) => {
              return this.$AutoFun(()=>{
              let hButton = [];

                hButton.push(h(
                    "el-button",
                    {
                      props: { type: "primary", size: "small" },
                      style: { marginRight: "5px" },
                      on: {
                        click: () => {
                          this.editInfo(2,row);
                        }
                      }
                    },
                    "修改"
                  ));
                hButton.push(
                  h(
                    "el-button",
                    {
                      props: { type: "danger", size: "small" },
                      style: { marginRight: "5px" },
                      on: {
                        click: () => {
                          this.sureDel(row,-1);
                        }
                      }
                    },
                    "删除"
                  )
                );
              return hButton;
            });
            }
          }
        }        
      ],
      format: {  
        title:{
          labelName: "标题名称",
          labelType: "text",      
          placeholder:"请输入标题名称"
        },
        content:{
          labelName: "内容",
          labelType: "textarea",     
          placeholder:"请输入简称"          
        },   
        role_id:{
          labelName: "用户角色",
          labelType: "select",
          labelValue:[],          
          placeholder:"请选择角色" 
        },                  
      },     
      ruleValidate: {
        title:[{ required: true,message: "标题名称不能为空", trigger: "blur" }],
        content:[{ required: true,message: "内容不能为空", trigger: "blur" }],
        role_id:[{ required: true,validator:validateunit_p, trigger: "blur" }],
      },      
      dateOptions:{
        disabledDate(date){
          return date && date.valueOf() > Date.now();
        },

      },
    };
  },
  computed: {
            ...mapGetters(["UserInfo"]),
        },
  methods: {
    //状态改变调用接口
    change (index) {
      console.log("value,item",this.list[index])
          let info = {"id":this.list[index].id};
          this.list[index].status=="1"?this.handleType = 3:this.handleType = 4;
          this.updateInfo(info);
          this.getList()
    },
    async initView(isMounted){
      if(isMounted){
        await this.getList();
        await this.initSearchData();

      }

    },
    async initSearchData() {
      //角色管理接口
      let res = await Request.post("sys/role", "query_list");
      this.idlistObj = {}
      this.format.role_id.labelValue=[]
      if(res.code==0 && res.data != null){
        res.data.list.forEach((item) => {
          this.$set(this.idlistObj,item.id,item.name)
          this.format.role_id.labelValue.push({id:item.id,name:item.name});
        })  
      }
    },
    onSearchGetList(){
      this.searchData.page_index =1;
      this.getList();
    },
    async getList(){
      utils.showLoading()
      let res = await this.RequestPost("query_list",this.searchData); 
      if(res.code==0 && res.data != null){
        this.list = [];
        if(res.data.list!=null)
        this.list = res.data.list;
        this.totalCnt = res.data.total
      }
      await utils.sleepMs(500)
      utils.hideLoading();
    },    
    //添加 编辑用户
    async editInfo(type,row) {
      this.handleType=type;
      let title = "";
      let info = {};
      if(this.handleType==1){
        title = "添加公告";
        info = {
          title:"",          
          content:"",
          role_id:"",
        };
      }else{
        if (row.Status > 1){
          this.format.Status.labelDisabled = true
        }
        title = "修改公告";
        info = {
          id:row.id,
          title:row.title,    
          content:row.content,     
        };
      }
      this.formPopIndex=await utils.showFormPage(
        { title: title,el:this.$parent.$el,width:700,cancelBtnStatus:0},
        info,
        this.format,
        this.ruleValidate,
        this.updateInfo,
        this.onSelectChange,
      );
    },    
    async updateInfo(info) {
      utils.showLoading()
      let code = -1;
      let actionName = '';
      let tipText = '';
      let postData = utils.cloneObj(info);
      if (this.handleType==1) {
        actionName = 'add_item';
        tipText = '添加成功！';    
        postData = {"title":postData.title,"content":postData.content,"role_id":postData.role_id};        
      }else if(this.handleType==2){
        actionName = 'edit_item';
        tipText = '修改成功！';     
        postData = {"id":postData.id,"title":postData.title,"content":postData.content};        
      }else if(this.handleType==-1){
        actionName = 'del_item';
        tipText = '删除成功！';
        postData = {"id":postData.id};
      }else if(this.handleType==3){
        actionName = 'enable_item';
        tipText = '启用成功！';
        postData = {"id":postData.id};
      }else if(this.handleType==4){
        actionName = 'disable_item';
        tipText = '禁用成功！';
        postData = {"id":postData.id};
      }
      let res = await this.RequestPost(actionName, postData);
      code = res.code;
      if (code == 0) {
        utils.hideFormPage(this.formPopIndex);
        await utils.sleepMs(1000);
        this.onSearchGetList();
        utils.showTip(tipText);
      }
      utils.hideLoading();
    },        
    //删除
    sureDel(item,type) {
       this.handleType = -1;
        utils.showSureModal({
          "title":"删除提示",            
          "icon":require('../../assets/images/peach-svg/Frame 427318277 (1).svg'),
          "modalContent":"确认删除 "+item.title+" ?","callBackArgs":{"id":item.id}},(res)=>{
        let code = res.code;
        if(code==0){
          let data = res.data;
          this.updateInfo(data);
        }
      });
      this.getList()
    },    
    onChangePageSize(page,pageSize){
      this.modal = true        
      this.searchData.page_index = page;
      this.searchData.page_size = pageSize;
      this.getList();
    },
    changeDate(val){
      let num = new Date(val)
      let time = num.getTime()/1000;
      // this.searchData.create_at = time
    },    
    onSelectChange(label,value,reset){
    },    
    slotHeader(h) {
      return [h("div",{class:{"allCount":true},"style":{"margin-left":"10px"}})]
    },
    filterPartner(item){
      if (item.Id == -1) return true;
      if (this.searchData.searchBusinessId == -1 ) return true
        return item.BusinessId==this.searchData.searchBusinessId;
    },
  },
};
</script>  